<template>
  <div class="p-2">
    <Row :gutter="[24, 24]" style="width: 100%">
      <!-- 卡片默认新增框 -->
      <Col
        :xxl="24 / span.xxl"
        :xl="24 / span.xl"
        :lg="24 / span.lg"
        :md="24 / span.md"
        :sm="24 / span.sm"
        :xs="24 / span.xs"
        @click="handleAdd"
        v-auth="createAuth"
      >
        <div class="lemon-card-add" :style="{ height: height + 'px' }">
          <div class="lemon-card-add-top">
            <img :src="addIcon" alt="add-icon" class="lemon-card-add-icon" />
            <img :src="addIconHover" alt="add-icon" class="lemon-card-add-icon-hover" />
          </div>
          <div class="lemon-card-add-text"> 新增{{ name }} </div>
        </div>
      </Col>
      <!-- 数据 -->
      <Col
        v-for="(item, key) in data"
        :key="key"
        :xxl="24 / span.xxl"
        :xl="24 / span.xl"
        :lg="24 / span.lg"
        :md="24 / span.md"
        :sm="24 / span.sm"
        :xs="24 / span.xs"
      >
        <slot name="content" :record="item"></slot>
        <slot name="action" :record="item"></slot>
      </Col>
    </Row>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { Row, Col } from 'ant-design-vue';
  import { propTypes } from '/@/utils/propTypes';
  import { isFunction } from '/@/utils/is';

  import addIcon from '/@/assets/svg/add-icon.svg';
  import addIconHover from '/@/assets/svg/add-icon-hover.svg';

  // 组件接收参数
  const props = defineProps({
    span: { type: Object, default: () => ({ xxl: 6, xl: 4, lg: 4, md: 3, sm: 2, xs: 1 }) },
    height: { type: Number, default: 300 },
    // 请求API的参数
    params: propTypes.object.def({}),
    //api
    api: propTypes.func,
    //name
    name: propTypes.string.def(''),
    //auth
    createAuth: propTypes.string.def(''),
  });
  //暴露内部方法
  const emit = defineEmits(['getMethod', 'create', 'delete']);
  //数据
  const data = ref([]);

  // 自动请求并暴露内部方法
  onMounted(() => {
    fetch();
    emit('getMethod', fetch);
  });

  async function fetch(p = {}) {
    const { api, params } = props;
    if (api && isFunction(api)) {
      const res = await api({ ...params, page: page.value, pageSize: pageSize.value, ...p });
      data.value = res.records;
      total.value = res.total;
    }
  }
  //分页相关
  const page = ref(1);
  const pageSize = ref(36);
  const total = ref(0);

  async function handleAdd() {
    emit('create');
  }
</script>

<style lang="less" scoped>
  .lemon-card-add {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px dashed rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.03);
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
  }

  .lemon-card-add-top {
    width: 80px;
    height: 80px;
    position: relative;
  }

  .lemon-card-add:hover {
    border-color: rgba(25, 83, 255, 0.3);
    background: rgba(25, 83, 255, 0.06);
    transition: all 0.3s ease-in-out;
  }

  .lemon-card-add:hover .lemon-card-add-icon {
    opacity: 0;
    transition: all 0.2s ease-in-out;
  }

  .lemon-card-add:hover .lemon-card-add-icon-hover {
    opacity: 1;
    transition: all 0.5s ease-in-out;
  }

  .lemon-card-add:hover .lemon-card-add-text {
    color: rgba(25, 83, 255, 1);
    transition: all 0.3s ease-in-out;
  }

  .lemon-card-add-icon {
    position: absolute;
    width: 80px;
    height: 80px;
    opacity: 1;
  }

  .lemon-card-add-icon-hover {
    position: absolute;
    width: 80px;
    height: 80px;
    opacity: 0;
  }

  .lemon-card-add-text {
    padding-top: 5px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.35);
  }
</style>
